<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>订单管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="{{ url_for('static',filename='layuiadmin/layui/css/layui.css') }}" media="all">
    <link rel="stylesheet" href="{{ url_for('static',filename='layuiadmin/style/admin.css') }}" media="all">
    <link rel="stylesheet" href="{{ url_for('static',filename='css/import_excel.css') }}">
    <script src="{{ url_for('static', filename='common/xlsx.full.min.js') }}"></script>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
    <script src="https://cdn.bootcss.com/xlsx/0.11.5/xlsx.core.min.js"></script>

</head>

<body>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div class="layui-btn-group test-table-btn" style="margin-bottom: 10px;" id="data_bar"
                         lay-filter="data_bar">

{#                        <div class="up-wrap">#}
{#                            <a class="layui-btn layui-btn" href="{{ url_for('cms.send_order_excel') }}">导出发货订单</a>#}
{#                            <button class="layui-btn-danger layui-btn bbbb">上传快递信息</button>#}
{#                            <input type="file" class="file-input aaaa" value="0000" id="file">#}
{#                        </div>#}

                    </div>

                    <form class="layui-form" style="padding-bottom: 10px">
                        <div class="layui-input-inline">
                            <input type="text" name="user_id" autocomplete="off"
                                   placeholder="用户手机号" class="layui-input">
                            <input type="hidden" name="status" value="{{ 1 }}" class="layui-input">
                        </div>

                        <div class="layui-input-inline " style="width: 90px">
                            <button class="layui-btn" id="searchEmailCompany" data-type="reload">
                                <i class="layui-icon" style="font-size: 20px; "></i> 搜索
                            </button>
                        </div>
                    </form>


                    <table class="layui-hide" id="test-table" lay-filter="test-table"></table>

                    <script type="text/html" id="test-table-barDemo">
                        <a class="layui-btn layui-btn-xs" lay-event="edit">发货</a>
{#                        <a class="layui-btn layui-btn-xs layui-btn-normal"#}
{#                           lay-href="/cms/mall/mall_orders_detail/?order_id={{ '{{ d.order_id }}' | safe }}">订单详情</a>#}
                    </script>
                </div>
            </div>
        </div>
    </div>

</div>

<!-- 展示图片大小 -->
<style type="text/css">
    .layui-table-cell {
        text-align: center;
        height: auto;
        white-space: normal;
    }

    .layui-table img {
        max-width: 100px
    }
</style>


<!-- 添加和修改的弹出层开始 -->
<div style="display: none;padding: 20px" id="saveOrUpdateDiv">
    <form class="layui-form " action="" lay-filter="dataFrm" id="dataFrm">



        <div class="layui-form-item">
            <div class="layui-col-md10">
                <label class="layui-form-label">快递公司：</label>
                <div class="layui-input-block">
                    <select name="data_id" id="data_id" lay-filter="data_id">
                        <option value=""></option>
                        {% for j in delivery %}
                            <option value="{{ j.id }}">{{ j.name }}</option>
                        {% endfor %}

                    </select>
                </div>
            </div>
        </div>


        <div class="layui-form-item">
            <div class="layui-col-md10">
                <label class="layui-form-label">快递单号：</label>
                <div class="layui-input-block">
                    <input type="text" name="logistics_num" placeholder="请输入快递单号" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
        </div>


        <input type="hidden" name="order_id" id="order_id">
        <input type="hidden" name="status" value="{{ status }}">
        <input type="hidden" name="t_type" value="{{ t_type }}">
        <input type="hidden" name="user_id_" value="{{ user_id or '' }}">

        <div class="layui-form-item" style="margin-top:40px; ">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit="" lay-filter="doSubmit">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>


    </form>
</div>
<!-- 添加和修改的弹出层结束 -->


<script src="{{ url_for('static',filename='layuiadmin/layui/layui.js') }}"></script>
<script>
    layui.config({
        base: '../../../static/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'table', 'jquery', 'layer', 'form', 'upload'], function () {
        var admin = layui.admin;
        var table = layui.table;
        var upload = layui.upload;
        var $ = layui.jquery;
        var data_status = $("input[name='status']").val();
        var data_user_id = $("input[name='user_id_']").val();
        var data_t_type = $("input[name='t_type']").val();

        var tableIns = table.render({
            elem: '#test-table',
            title: '待发货订单',
            toolbar: true,
            {#toolbar: "#data_bar",#}
            url: '/cms/mall/buy_deal_deliver_info/?status=0' + '&user_id=' + data_user_id + '&t_type=' + data_t_type,
            cols: [[
                {field: 'order_id', title: 'ID', align: 'center', hide: true,},
                {field: 'phone', title: '账号', align: 'center'},
                {field: 'goods_name', title: '商品名称', align: 'center'},
                {field: 'total_price', title: '总金额', align: 'center'},
                {field: 'num', title: '数量', align: 'center'},
                {#{field: 'freight', title: '运费', align: 'center'},#}

                {field: 'sh_name', title: '收货人', align: 'center'},
                {field: 'sh_phone', title: '收货手机号', align: 'center'},
                {field: 'sh_province', title: '省', align: 'center'},
                {field: 'sh_city', title: '市', align: 'center'},
                {field: 'sh_district', title: '县', align: 'center'},
                {field: 'sh_place', title: '详细地址', align: 'center'},
                {field: 'create_time', title: '创建时间', align: 'center'},
                {#{field: 'trade_no', title: '订单号', align: 'center'},#}
                {align: 'center', title: '操作', toolbar: '#test-table-barDemo',}
            ]]
            , page: true
        });


        //监听工具条
        table.on('tool(test-table)', function (obj) {
            var data = obj.data;
            if (obj.event === 'edit') {
                openUpdate(data);
            }
        });


        var url;
        var mainIndex;


        //打开修改页面
        function openUpdate(data) {
            mainIndex = layer.open({
                type: 1,
                title: '修改数据',
                content: $("#saveOrUpdateDiv"),
                area: ['600px', '450px'],
                success: function (index) {
                    layui.form.val("dataFrm", data);

                }
            });
        }


        //保存
        layui.form.on("submit(doSubmit)", function (obj) {
            //序列化表单数据
            var data = obj.field;
            data['status'] = data_status;
            console.log(data);
            $.ajax({
                url: '/cms/mall/shipping_success_button/',
                type: "POST",
                data: data,
                success: function (data) {
                    if (data['code'] == 200) {
                        //关闭弹框
                        layer.close(mainIndex);
                        //显示提示框
                        layer.msg("成功", {icon: 6});
                        tableIns.reload();
                        {#window.location.href = "{{ url_for('cms.cms_records') }}"#}
                    } else {
                        layer.msg(data['message'], {icon: 5});
                    }
                }
            });
            return false;
        });


        //首先监听input框的变动，选中一个新的文件会触发change事件
        /*document.querySelector("#file").addEventListener("change", function () {
            //获取到选中的文件
            var file = document.querySelector("#file").files[0];
            var type = file.name.split('.');
            if (type[type.length - 1] !== 'xlsx' && type[type.length - 1] !== 'xls') {
                alert('只能选择excel文件导入');
                return false;
            }
            const reader = new FileReader();
            reader.readAsBinaryString(file);
            reader.onload = (e) => {
                const data = e.target.result;
                const zzexcel = window.XLS.read(data, {
                    type: 'binary'
                });
                const result = [];
                for (let i = 0; i < zzexcel.SheetNames.length; i++) {
                    const newData = window.XLS.utils.sheet_to_json(zzexcel.Sheets[zzexcel.SheetNames[i]]);
                    result.push(...newData)
                }

                console.log('result', result);
                $.ajax({
                    type: 'POST',
                    url: '/cms/mall/send_order_import/',
                    data: {
                        'order_list': JSON.stringify(result),
                    },
                    success: function (data) {
                        if (data['code'] == 200) {
                            {#console.log(result);#}
                            window.location.reload()
                        } else {
                            layer.msg(data['message'], {icon: 5});
                        }
                    },
                });

            }
        });*/


    });
</script>
</body>
</html>